<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>云起书院</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			#main{
				height: 500px;
			}
			
			#content{
				height: 90%;
				background-color: floralwhite;
			}
			#footer{
				height: 10%;
				background-color: whitesmoke;
			}
			
			/*导航栏区域*/
			.insert_daohanlang{
				position: relative;
				height: 50px;
				width: 100%;
				background-color:whitesmoke ;
				float: right;
			}
			/*插入的图片区域*/
			.insert_img{
				width: 31px;
				height: 31px;
				float: right;
				margin-right: 2px;
				margin-top: 10px;
			}
			/*插入文本区域*/
			.insert_text{
				width: 55px;
				float: right;
				margin-right: 10px;
				margin-top: 14px;
			}
			/*插入长文本区域*/
			.insert_longtext{
				width: 80px;
				float: left;
				margin-top: 13px;
			}
			/*商标区域*/
			#shangbiao{
				width: 75px;
				height: 100%;
				float: left;
			}
			/*商标区域名字*/
			#shangbiaoname{
				width: 75px;
				height: 100%;
				font-family: "楷体";
				margin-top: 15px;
				float: left;
			}
			/*插入新的一行区域*/
			.insert_row{
				height: 50px;
				font-family: "楷体";
				width: 100%;
				float: left;
				background-color: floralwhite;
			}
			/*提示语区域*/
			#tishiyuju{
				margin-top: 15px;
			}
			a{text-decoration: none; color: black;}
			img{height:25px; width: 25px;}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="content">
				<div class="insert_daohanlang">
					<div class="insert_text">&nbsp;<input type="submit" value="注册" /></div>
					<div class="insert_text">&nbsp;<input type="submit" value="登录" /></div>
					<div class="insert_text"><a href="#" >&nbsp;<b>退出</b></a></div>
					<div class="insert_img"><img src="../img/退出.png" /></div>
					<div class="insert_text"><a href="#" >&nbsp;<b>订单</b></a></div>
					<div class="insert_img"><img src="../img/订单.PNG" /></div>
					<div class="insert_text"><a href="#" >&nbsp;<b>购物车</b></a></div>
					<div class="insert_img"><img src="../img/购物车.png" /></div>
					<div class="insert_text"><a href="#" >&nbsp;<b>用户</b></a></div>
					<div class="insert_img"><img src="../img/用户.PNG" /></div>
					<div class="insert_text"><a href="#" >&nbsp;<b>首页</b></a></div>
					<div class="insert_img"><img src="../img/首页.PNG"/></div>
					<div id="shangbiao">
						<!--使用内联样式特殊化处理-->
						<img src="../img/商标.png" style="height: 50px; width: 75px;"/>
					</div>
					<div id="shangbiaoname">
						<b>云起书院</b>
					</div>
				</div>
				<div class="insert_row">
					<div id="tishiyuju">
						&gt;&gt;欢迎访问 <b>云起书院</b></td>
					</div>
				</div>
				<div class="insert_row">
					<div class="insert_img" style="float: left;">
						<img src="../img/箭头.png" />
					</div>
					<div class="insert_longtext">
						云起书院
					</div>
					<div class="insert_img" style="float: left;">
						<img src="../img/箭头.png" />
					</div>
					<div class="insert_longtext">
						用户登录
					</div>
				</div>
				<div class="insert_row" style="height: 20px;"></div>
				<div class="insert_row" style="height: 30px;">
					<div class="insert_longtext" style="width: 200px; margin-left:670px ; margin-top: 3px;">
						<b>输入您的用户名以及密码</b>
					</div>
				</div>
				<div class="insert_row" style="height: 30px;">
					<div class="insert_longtext" style="float: left; width: 120px; margin-top: 3px;margin-left: 620px;">
						请输入用户名
					</div>
					<div style="float: left;">
						<input type="text"/>
					</div>
				</div>
				<div class="insert_row" style="height: 30px;">
					<div class="insert_longtext" style="float: left; width: 120px; margin-top: 3px;margin-left: 620px;">
						请输入密码
					</div>
					<div style="float: left;">
						<input type="text"/>
					</div>
				</div>
				<div class="insert_row" style="height: 30px;">
					<div style="float: left; margin-left: 750px;">
						<input type="submit" value="登录"/>
					</div>
				</div>
				
			</div>
			
			<div id="footer">
				<div style="margin-left: 500px; float: left; margin-top: 10px;">
					CopyRight <sup>&reg;</sup>2009-2014&nbsp;北京云起书院有限公司&nbsp;电话：4000-118-118
				</div>
			</div>
		</div>
	</body>
</html>
